<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>狼途汽车互联网商户平台</title>
    <#include "/common/link.ftl"/>
    <link rel="stylesheet" href="/css/index_css.css">
</head>
<body>
<div class="nav">
    <div class="nav-div">
        <div class="row justify-content-between" >
            <div class="col-md-4 border-right" style="padding: 0px;" >
                <h4>狼途汽车服务平台</h4>
                <h5 style="color:#434343;font-size: 18px">连锁运营顾问 / 高级服务专家</h5>
            </div>
            <div class="col-md-3 category" style="padding-left: 30px">
                <button class="btn btn-primary-cus ">售卖</button>
                <button class="btn btn-primary-cus ">保养</button>
                <button class="btn btn-primary-cus ">修理</button>
                <button class="btn btn-primary-cus ">美容</button>
                <button class="btn btn-primary-cus ">配件</button>
                <button class="btn btn-primary-cus ">售后</button>
            </div>
            <div class="col-md-1" style="text-align: center;padding: 20px;">
                <button class="btn btn-primary-full" type="button" id="btn-appointment">
                    马上预约
                </button>

            </div>
            <div class="col-md-4 tel"  style="padding: 15px;">
                <h2 style="vertical-align:middle;"><i class="fa fa-phone"></i></h2>
                <h5 style="color:#434343; ">全国免费热线:</h5>
                <h2 >020-85628002</h2>
            </div>
        </div>
    </div>

</div>

<h1 style="text-align: center">
    狼途留言详情页
</h1>
<div class="container">
    <div class="box box-widget">
        <div class="box-header with-border">
            <div class="user-block">
                <img class="img-circle" src="/js/adminlte/img/user2-160x160.jpg" alt="User Image">
                <span class="username"><a href="#">${messageBoard.nickname}</a></span>
                <span class="description">${((messageBoard.createTime)?string("yyyy-MM-dd HH:mm:ss"))!} <span>咨询类型：</span><span>${messageBoard.category.title}</span>-<span>${messageBoard.categoryItem.title}</span></span>
            </div>
        </div>
        <div class="box-body">
            <p>${messageBoard.content}</p>
            <span class="pull-right text-muted">一共${count}条回复</span>
            <#if (count <= 0)>
                <a href="javascript:void(0);" class="btn btn-info btn-xs btn-reply pull-right" data-id="">回复</a>
            </#if>
        </div>
        <div class="box-footer box-comments">
            <#list messageBoard.messageReplies as reply>
                <div class="box-comment">
                    <img class="img-circle img-sm" src="/js/adminlte/img/user2-160x160.jpg" alt="User Image">
                    <div class="comment-text">
                        <span class="username">
                            ${reply.replyUser.name}
                            <#if EMPLOYEE_IN_SESSION.id == reply.replyUser.id>
                                <span style="color: #002a80">(本人)</span>
                            </#if>
                            <span class="text-muted pull-right">
                                ${((reply.createTime)?string("yyyy-MM-dd HH:mm:ss"))!}
                                <#if EMPLOYEE_IN_SESSION.id != reply.replyUser.id>
                                    <span style="font-size: 13px;color: ${(reply.replyStatus?string('green', 'red'))!}">${(reply.replyStatus?string("(已回复)", '(未回复)'))!}</span>
                                </#if>
                            </span>
                        </span>
                        <p>
                            ${reply.content}
                            <#if EMPLOYEE_IN_SESSION.id != reply.replyUser.id && !reply.replyStatus>
                                <a href="javascript:void(0);" class="btn btn-info btn-xs btn-reply pull-right" data-id="${reply.id}">回复</a>
                            </#if>
                        </p>
                    </div>
                </div>
            </#list>
        </div>
    </div>
</div>
<div class="modal fade" id="messageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog " style="max-width: 400px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" >请输入回复信息</h4>
            </div>
            <form id="replyForm" method="post" action="/messageBoard/saveReply">
                <input type="hidden" name="message.id" value="${messageBoard.id}">
                <input type="hidden" name="replyId" id="replyId">
                <div class="modal-body">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-bookmark"></i></span>
                        <textarea class="form-control" style="max-width: 330px;height: 200px;" name="content" placeholder="请输入您的回复内容"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary-full btn-saveReply">确定</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(function () {
        $(".btn-reply").click(function () {
            var id = $(this).data("id");
            $("#replyId").val(id);
            $("#messageModal").modal("show");
        });

        $(".btn-saveReply").click(function () {
            Swal.fire({
                title: '确定发布回复吗?',
                text: "回复后数据无法修改!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then((result) => {
                if (result.value) {
                    $("#replyForm").ajaxSubmit(function (data) {
                        console.log(data);
                        if(data.success){
                            Swal.fire({
                                title: '回复成功',
                                icon: 'success'
                            });
                            window.location.reload();
                        }
                    });
                }
            });
        });
    });
</script>
</body>
</html>
